<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Node 第 1 天 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/heima2020/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/heima2020/assets/css/0.styles.aa663799.css" as="style"><link rel="preload" href="/heima2020/assets/js/app.e2adc9d2.js" as="script"><link rel="preload" href="/heima2020/assets/js/2.7389c9d3.js" as="script"><link rel="preload" href="/heima2020/assets/js/10.8b750e5f.js" as="script"><link rel="prefetch" href="/heima2020/assets/js/11.9224f975.js"><link rel="prefetch" href="/heima2020/assets/js/12.3ea117b6.js"><link rel="prefetch" href="/heima2020/assets/js/13.7524b74f.js"><link rel="prefetch" href="/heima2020/assets/js/14.cee0fcf8.js"><link rel="prefetch" href="/heima2020/assets/js/15.7a4a27f7.js"><link rel="prefetch" href="/heima2020/assets/js/16.947d882b.js"><link rel="prefetch" href="/heima2020/assets/js/17.79d3becb.js"><link rel="prefetch" href="/heima2020/assets/js/18.48208e3a.js"><link rel="prefetch" href="/heima2020/assets/js/19.3d0c49ef.js"><link rel="prefetch" href="/heima2020/assets/js/20.1f6114c8.js"><link rel="prefetch" href="/heima2020/assets/js/21.85e67b4a.js"><link rel="prefetch" href="/heima2020/assets/js/22.ce482f4d.js"><link rel="prefetch" href="/heima2020/assets/js/23.a150bd35.js"><link rel="prefetch" href="/heima2020/assets/js/24.8cd80d5d.js"><link rel="prefetch" href="/heima2020/assets/js/25.0001c7c1.js"><link rel="prefetch" href="/heima2020/assets/js/26.aa4d65a5.js"><link rel="prefetch" href="/heima2020/assets/js/27.baffff1d.js"><link rel="prefetch" href="/heima2020/assets/js/28.20430dcf.js"><link rel="prefetch" href="/heima2020/assets/js/29.7bbc3c04.js"><link rel="prefetch" href="/heima2020/assets/js/3.0076a912.js"><link rel="prefetch" href="/heima2020/assets/js/30.5f74696f.js"><link rel="prefetch" href="/heima2020/assets/js/31.a0bf56d6.js"><link rel="prefetch" href="/heima2020/assets/js/32.dd5a93dd.js"><link rel="prefetch" href="/heima2020/assets/js/33.92de7335.js"><link rel="prefetch" href="/heima2020/assets/js/34.bf468ed6.js"><link rel="prefetch" href="/heima2020/assets/js/35.28502be1.js"><link rel="prefetch" href="/heima2020/assets/js/36.3622a14c.js"><link rel="prefetch" href="/heima2020/assets/js/37.626e17d3.js"><link rel="prefetch" href="/heima2020/assets/js/38.860020b8.js"><link rel="prefetch" href="/heima2020/assets/js/39.c092c283.js"><link rel="prefetch" href="/heima2020/assets/js/4.586af112.js"><link rel="prefetch" href="/heima2020/assets/js/40.a6ba2743.js"><link rel="prefetch" href="/heima2020/assets/js/41.43d70bcd.js"><link rel="prefetch" href="/heima2020/assets/js/42.6486a709.js"><link rel="prefetch" href="/heima2020/assets/js/43.670b256a.js"><link rel="prefetch" href="/heima2020/assets/js/44.eb371480.js"><link rel="prefetch" href="/heima2020/assets/js/45.5b45f11e.js"><link rel="prefetch" href="/heima2020/assets/js/46.bc59be94.js"><link rel="prefetch" href="/heima2020/assets/js/47.ec36fca9.js"><link rel="prefetch" href="/heima2020/assets/js/48.51e80f8f.js"><link rel="prefetch" href="/heima2020/assets/js/5.6eb7e243.js"><link rel="prefetch" href="/heima2020/assets/js/6.1b7d5a6d.js"><link rel="prefetch" href="/heima2020/assets/js/7.f611fe3c.js"><link rel="prefetch" href="/heima2020/assets/js/8.c14cc922.js"><link rel="prefetch" href="/heima2020/assets/js/9.cd5538bb.js">
    <link rel="stylesheet" href="/heima2020/assets/css/0.styles.aa663799.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/heima2020/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/heima2020/node/day01" class="sidebar-heading clickable open active"><span>Node</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/heima2020/node/day01.html" aria-current="page" class="active sidebar-link">Node 第 1 天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/heima2020/node/day01.html#node-第-1-天" class="sidebar-link">Node 第 1 天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/heima2020/node/day01.html#_1-学习目标" class="sidebar-link">1. 学习目标</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day01.html#_2-回顾和思考" class="sidebar-link">2. 回顾和思考</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day01.html#_3-初识-node" class="sidebar-link">3. 初识 Node</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day01.html#_4-fs-文件系统" class="sidebar-link">4. fs 文件系统</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day01.html#_5-fs-路径问题" class="sidebar-link">5. fs 路径问题</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day01.html#_6-path-路径模块" class="sidebar-link">6. path 路径模块</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day01.html#_7-时钟案例" class="sidebar-link">7. 时钟案例</a></li></ul></li></ul></li><li><a href="/heima2020/node/day02.html" class="sidebar-link">Node 第 2 天</a></li><li><a href="/heima2020/node/day03.html" class="sidebar-link">Node 第 3 天</a></li><li><a href="/heima2020/node/day04.html" class="sidebar-link">Node 第 4 天</a></li><li><a href="/heima2020/node/day05.html" class="sidebar-link">Node 第 5 天</a></li><li><a href="/heima2020/node/day06.html" class="sidebar-link">Node 第 6 天</a></li><li><a href="/heima2020/node/day07.html" class="sidebar-link">Node 第 7 天</a></li><li><a href="/heima2020/node/day08.html" class="sidebar-link">Node 第 8 天</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="node-第-1-天"><a href="#node-第-1-天" class="header-anchor">#</a> Node 第 1 天</h2> <h3 id="_1-学习目标"><a href="#_1-学习目标" class="header-anchor">#</a> 1. 学习目标</h3> <p>◆ 能够知道什么是 <code>Node.js</code></p> <p>◆ 能够知道 <code>Node.js</code> 可以做什么</p> <p>◆ 能够说出 <code>Node.js</code> 中的 <code>JavaScript</code> 的组成部分</p> <p>◆ 能够使用 <code>fs</code> 模块读写操作文件</p> <p>◆ 能够使用 <code>path</code> 模块处理路径</p> <h3 id="_2-回顾和思考"><a href="#_2-回顾和思考" class="header-anchor">#</a> 2. 回顾和思考</h3> <h4 id="_2-1-为什么-javascript-可以在浏览器中执行"><a href="#_2-1-为什么-javascript-可以在浏览器中执行" class="header-anchor">#</a> 2.1 为什么 JavaScript 可以在浏览器中执行</h4> <h5 id="_2-1-1-已经掌握了哪些技术"><a href="#_2-1-1-已经掌握了哪些技术" class="header-anchor">#</a> 2.1.1 已经掌握了哪些技术</h5> <img src="/heima2020/assets/img/001-已经掌握的技术.d0ad5f0f.png"> <h5 id="_2-1-2-浏览器中的-javascript-的组成部分"><a href="#_2-1-2-浏览器中的-javascript-的组成部分" class="header-anchor">#</a> 2.1.2 浏览器中的 JavaScript 的组成部分</h5> <img src="/heima2020/assets/img/002-浏览器中的JavaScript的组成部分.8ab9fc78.png"> <h5 id="_2-1-3-为什么-javascript-可以在浏览器中被执行"><a href="#_2-1-3-为什么-javascript-可以在浏览器中被执行" class="header-anchor">#</a> 2.1.3 为什么 JavaScript 可以在浏览器中被执行</h5> <img src="/heima2020/assets/img/003-为什么JavaScript可以在浏览器中被执行.83cdb233.png"> <h4 id="_2-2-javascript-可以操作-dom-和-bom"><a href="#_2-2-javascript-可以操作-dom-和-bom" class="header-anchor">#</a> 2.2 JavaScript 可以操作 <code>DOM</code> 和 <code>BOM</code></h4> <ul><li>每个浏览器都内置了 <code>DOM</code>、<code>BOM</code> 这样的 <code>API</code> 函数，因此，浏览器中的 <code>JavaScript</code> 才可以调用它们。</li></ul> <img src="/heima2020/assets/img/004-为什么浏览器可以解析DOM和BOM.890eb043.png"> <h4 id="_2-3-浏览器中的-javascript-运行环境"><a href="#_2-3-浏览器中的-javascript-运行环境" class="header-anchor">#</a> 2.3 浏览器中的 JavaScript 运行环境</h4> <p>运行环境是指代码正常运行所需的必要环境</p> <img src="/heima2020/assets/img/005-运行环境.fa448a95.png" alt="运行环境"> <p>总结：</p> <ol><li><p><code>V8</code> 引擎负责解析和执行 <code>JavaScript</code> 代码</p></li> <li><p>内置 <code>API</code> 是由运行环境提供的特殊接口，只能在所属的运行环境中被调用</p></li></ol> <h4 id="_2-4-javascript-能否做后端开发"><a href="#_2-4-javascript-能否做后端开发" class="header-anchor">#</a> 2.4 JavaScript 能否做后端开发</h4> <ol><li><code>JavaScript</code> 可以做后台开发，只不过需要借助 <code>Node.js</code></li> <li><code>JavaScript</code> 作为一门语言，代码的执行肯定需要运行环境，浏览器能够解析 <code>JavaScript</code> 代码，因为浏览器是一个运行环境，恰好，<code>Node.js</code> 也集成了一个 <code>JavaScript</code> 运行环境，也可以对 <code>JavaScript</code> 代码进行解析，不过 <code>Node</code> 是一个后端的运行环境，也是因此 <code>JavaScript</code> 能够进行后台的开发</li></ol> <h3 id="_3-初识-node"><a href="#_3-初识-node" class="header-anchor">#</a> 3. 初识 <code>Node</code></h3> <h4 id="_3-1-什么是-node"><a href="#_3-1-什么是-node" class="header-anchor">#</a> 3.1 什么是 <code>Node</code></h4> <blockquote><p>能够了解 Node 是一个运行环境，并不是一门后台语言</p></blockquote> <p><code>Node.js</code> 是一个基于 <code>Chrome V8</code> 引擎的 <code>JavaScript</code> 运行环境</p> <p><strong>Node 实际上就是一个 <code>JavaScript</code> 运行环境，它集成了 <code>v8</code> 引擎， 从而能对 <code>JavaScript</code> 代码进行解析</strong></p> <img src=""> <h4 id="_3-2-node-中的-javascript-环境"><a href="#_3-2-node-中的-javascript-环境" class="header-anchor">#</a> 3.2 <code>Node</code> 中的 <code>JavaScript</code> 环境</h4> <blockquote><p>能够知道 Node 运行环境包含哪两个部分</p> <p>能够知道 Node 运行环境和 浏览器运行环境的区别</p></blockquote> <ol><li>Node 运行环境包含两个部分，分别是：</li></ol> <ul><li><code>V8</code> 引擎，主要负责解析 <code>JavaScript</code> 代码</li> <li>内置 <code>API</code>，我们学习 <code>Node.js</code> 重点就是学习这些内置的 <code>API</code>，从而能够完成后台的开发</li></ul> <ol start="2"><li><code>Node</code> 运行环境和 浏览器运行环境的区别</li></ol> <ul><li><p>浏览器是 <code>JavaScript</code> 的前端运行环境</p></li> <li><p><code>Node.js</code> 是 <code>JavaScript</code> 的后端运行环境</p></li> <li><p><code>Node</code> 环境中 <strong>没有 <code>DOM</code> 和 <code>BOM</code> 的 <code>API</code></strong>，即在 <code>Node</code> 中无法调用 <code>DOM</code> 和 <code>BOM</code> 等浏览器内置 <code>API</code></p> <p>同理，在浏览器中也不能够调用 <code>Node</code> 内置 <code>API</code></p></li></ul> <img src="/heima2020/assets/img/007-Node.js中的JavaScript运行环境.9557f464.png"> <h4 id="_3-3-node-学习路径"><a href="#_3-3-node-学习路径" class="header-anchor">#</a> 3.3 Node 学习路径</h4> <h5 id="_3-3-1-node-可以做什么"><a href="#_3-3-1-node-可以做什么" class="header-anchor">#</a> 3.3.1 Node 可以做什么</h5> <p><code>Node</code> 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 <code>API</code>。然而，基于 <code>Node</code> 提供的这些基础能，很多强大
的工具和框架如雨后春笋，层出不穷，所以学会了 <code>Node</code> ，可以让前端程序员胜任更多的工作和岗位</p> <ol><li>基于 <a href="http://www.expressjs.com.cn/" target="_blank" rel="noopener noreferrer">Express 框架<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，可以快速构建 <code>Web</code> 应用</li> <li>基于 <a href="https://electronjs.org/" target="_blank" rel="noopener noreferrer">Electron 框架<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，可以构建跨平台的桌面应用</li> <li>基于 <a href="http://restify.com/" target="_blank" rel="noopener noreferrer">restify 框架<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，可以快速构建 <code>API</code> 接口项目</li> <li>读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…</li></ol> <h5 id="_3-3-2-node-学习路径"><a href="#_3-3-2-node-学习路径" class="header-anchor">#</a> 3.3.2 Node 学习路径</h5> <p>JavaScript 基础语法 --&gt; <strong><code>Node.js</code> 内置 <code>API</code> 模块</strong>（<code>fs</code>、<code>path</code>、<code>http</code> 等） --&gt; <strong>第三方 <code>API</code> 模块</strong>（express、<code>mysql</code> 等）</p> <h4 id="_3-4-下载并安装-node"><a href="#_3-4-下载并安装-node" class="header-anchor">#</a> 3.4 下载并安装 Node</h4> <h5 id="_3-4-1-下载-node-的方式"><a href="#_3-4-1-下载-node-的方式" class="header-anchor">#</a> 3.4.1 下载 Node 的方式</h5> <ol><li><p>如果希望通过 <code>Node.js</code> 来运行 <code>Javascript</code> 代码，则必须在计算机上安装 <code>Node.js</code> 环境才行</p></li> <li><p>安装包在 <code>Node.js</code> 官网首页直接<a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">下载<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，点击绿色的按钮，下载所需的版本后，双击直接安装即可</p></li></ol> <img src="/heima2020/assets/img/008-Node.5fb65568.png"> <h5 id="_3-4-2-区分-lts-版本和-current-版本的不同"><a href="#_3-4-2-区分-lts-版本和-current-版本的不同" class="header-anchor">#</a> 3.4.2 区分 <code>LTS</code> 版本和 Current 版本的不同</h5> <ol><li><strong><code>LTS</code>为长期稳定版</strong>，对于追求稳定性的企业级项目来说，推荐安装 <code>LTS</code> 版本的 <code>Node.js</code></li> <li><strong><code>Current</code> 为新特性尝鲜版</strong>，对热衷于尝试新特性的用户来说，推荐安装 <code>Current</code> 版本的 <code>Node.js</code>。但是，<code>Current</code> 版本中可能存在隐藏的 <code>Bug</code> 或安全性漏洞，因此不推荐在企业级项目中使用 <code>Current</code> 版本的 <code>Node.js</code></li></ol> <h4 id="_3-5-查看已安装的-node-的版本号"><a href="#_3-5-查看已安装的-node-的版本号" class="header-anchor">#</a> 3.5 查看已安装的 Node 的版本号</h4> <ol><li><p>打开终端，在终端输入命令 <code>node –v</code> 后，按下回车键，即可查看已安装的 <code>Node.js</code> 的版本号</p></li> <li><p>Windows 系统快速打开终端的方式：使用快捷键 (Windows 徽标键 + R) 打开运行面板，输入 <code>cmd</code> 后直接回车，即可打开终端</p></li></ol> <p><img src="/heima2020/assets/img/009-查看已安装的Node的版本号.ce9d5648.png" alt="查看已安装的 Node 的版本号"></p> <h4 id="_3-6-什么是终端"><a href="#_3-6-什么是终端" class="header-anchor">#</a> 3.6 什么是终端</h4> <ol><li>终端（英文：Terminal）是专门为开发人员设计的，用于实现人机交互的一种方式</li> <li>作为一名合格的程序员，我们有必要识记一些常用的终端命令，来辅助我们更好的操作与使用计算机</li></ol> <h4 id="_3-7-node-环境执行-javascript-代码"><a href="#_3-7-node-环境执行-javascript-代码" class="header-anchor">#</a> 3.7 Node 环境执行 JavaScript 代码</h4> <ol><li><p>在项目根目录下打开终端</p></li> <li><p>输入 node 要执行的 <code>js</code>文件的路径，例如</p></li></ol> <div class="language-js extra-class"><pre class="language-js"><code>node <span class="token number">1.</span>js
</code></pre></div><img src="/heima2020/assets/img/010-Node执行js代码.08ce86fd.png"> <h4 id="_3-8-更快捷的打开终端"><a href="#_3-8-更快捷的打开终端" class="header-anchor">#</a> 3.8 更快捷的打开终端</h4> <ol><li>在文件夹地址栏区域，输入 cmd ，既可以打开终端</li></ol> <img src="/heima2020/assets/img/011-cmd.52928574.png"> <ol start="2"><li>按照鼠标 shift，同时点击鼠标左键，在此处打开 <code>powershell</code></li></ol> <img src="/heima2020/assets/img/012-powershell.d88fed14.png" alt="powershell"> <h4 id="_3-9-终端中的快捷键"><a href="#_3-9-终端中的快捷键" class="header-anchor">#</a> 3.9 终端中的快捷键</h4> <p>在 <code>Windows</code> 的 <code>powershell</code> 或 <code>cmd</code> 终端中，我们可以通过如下快捷键，来提高终端的操作效率：</p> <ol><li>使用 <code>↑</code> 键，可以快速定位到上一次执行的命令</li> <li>使用 <code>tab</code> 键，能够快速补全路径</li> <li>使用 <code>esc</code> 键，能够快速清空当前已输入的命令</li> <li>输入 <code>cls</code> 命令，可以清空终端</li></ol> <h3 id="_4-fs-文件系统"><a href="#_4-fs-文件系统" class="header-anchor">#</a> 4. <code>fs</code> 文件系统</h3> <h4 id="_4-1-fs-文件系统模块"><a href="#_4-1-fs-文件系统模块" class="header-anchor">#</a> 4.1 <code>fs</code> 文件系统模块</h4> <ol><li><code>fs</code> 模块是 <code>Node.js</code> 官方提供的、用来<strong>操作文件</strong>的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求</li></ol> <ul><li><p><code>fs.readFile()</code> 方法，用来读取指定文件中的内容</p></li> <li><p><code>fs.writeFile()</code> 方法，用来向指定的文件中写入内容</p></li></ul> <ol start="2"><li><p>如果要在 <code>JavaScript</code> 代码中，使用 <code>fs</code> 模块来操作文件，则需要使用如下的方式先导入它</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol> <h4 id="_4-2-读取指定文件中的内容"><a href="#_4-2-读取指定文件中的内容" class="header-anchor">#</a> 4.2 读取指定文件中的内容</h4> <h5 id="_4-2-1-fs-readfile-的语法格式"><a href="#_4-2-1-fs-readfile-的语法格式" class="header-anchor">#</a> 4.2.1 <code>fs.readFile()</code> 的语法格式</h5> <p>使用 <code>fs.readFile()</code> 方法，可以读取指定文件中的内容，语法格式如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>path<span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
</code></pre></div><p>参数解读：</p> <ol><li>参数 1：必选参数，字符串，表示文件的路径</li> <li>参数 2：可选参数，表示以什么编码格式来读取文件</li> <li>参数 3：必选参数，文件读取完成后，通过回调函数拿到读取的结果</li></ol> <h5 id="_4-2-2-fs-readfile-的示例代码"><a href="#_4-2-2-fs-readfile-的示例代码" class="header-anchor">#</a> 4.2.2 <code>fs.readFile()</code> 的示例代码</h5> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1. 导入 fs 模块</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 2. 调用 fs.readFile() 方法读取文件</span>
<span class="token comment">//  参数 1： 读取文件的存放路径</span>
<span class="token comment">//  参数 2： 读取文件时候的编码格式，一般默认是 utf8</span>
<span class="token comment">//  参数 3： 回调函数，拿到读取失败和成功的结果， err 以及 data</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&quot;./Tom.txt&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 3. err</span>
  <span class="token comment">// 如果读取失败，则 err 的值为 null</span>
  <span class="token comment">// 如果读取失败，则 err 的值为错误对象， data 的值为 undefined</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 4. data 打印成功的结果</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_4-2-3-判断文件是否读取成功"><a href="#_4-2-3-判断文件是否读取成功" class="header-anchor">#</a> 4.2.3 判断文件是否读取成功</h5> <p>可以判断 err 对象是否为 null，从而知晓文件读取的结果</p> <ol><li>结果是 null ，说明文件读取成功</li> <li>如果不为 null，说明文件读取失败</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&quot;./Tom.txt&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 判断 err 对象是否为 null</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件读取失败：&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件读取成功，内容是：&quot;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_4-3-向指定的文件中写入内容"><a href="#_4-3-向指定的文件中写入内容" class="header-anchor">#</a> 4.3 向指定的文件中写入内容</h4> <h5 id="_4-3-1-fs-writefile-的语法格式"><a href="#_4-3-1-fs-writefile-的语法格式" class="header-anchor">#</a> 4.3.1 <code>fs.writeFile()</code> 的语法格式</h5> <p>使用 <code>fs.writeFile()</code> 方法，可以向指定的文件中写入内容，语法格式如下</p> <div class="language-js extra-class"><pre class="language-js"><code>fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span> data<span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
</code></pre></div><p>参数解读：</p> <ol><li>参数 1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径</li> <li>参数 2：必选参数，表示要写入的内容</li> <li>参数 3：可选参数，表示以什么格式写入文件内容，默认值是 <code>utf8</code></li> <li>参数 4：必选参数，文件写入完成后的回调函数</li></ol> <h5 id="_4-3-2-fs-writefile-的示例代码"><a href="#_4-3-2-fs-writefile-的示例代码" class="header-anchor">#</a> 4.3.2 <code>fs.writeFile()</code> 的示例代码</h5> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1. 导入 fs 文件系统模块</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 2. 调用 fs.writeFile() 方法，写入文件的内容</span>
<span class="token comment">//  参数 1：表示文件的存放路径</span>
<span class="token comment">//  参数 2：表示要写入的内容</span>
<span class="token comment">//  参数 3：回调函数</span>
fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">&quot;./Tom.txt&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot; Jerry&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 3. err</span>
  <span class="token comment">// 3.1 如果文件写入成功，则 err 的值等于 null</span>
  <span class="token comment">// 3.2 如果文件写入失败，则 err 的值等于一个错误对象</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_4-3-3-判断文件是否写入成功"><a href="#_4-3-3-判断文件是否写入成功" class="header-anchor">#</a> 4.3.3 判断文件是否写入成功</h5> <p>可以判断 err 对象是否为 null，从而知晓文件写入的结果</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">&quot;./Tom.txt&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Tom And Jerry&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件写入失败&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件写入成功&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_4-4-fs-整理考试成绩案例"><a href="#_4-4-fs-整理考试成绩案例" class="header-anchor">#</a> 4.4 <code>fs</code> 整理考试成绩案例</h4> <h5 id="_4-4-1-需求分析"><a href="#_4-4-1-需求分析" class="header-anchor">#</a> 4.4.1 需求分析</h5> <p>使用 <code>fs</code> 文件系统模块，将素材目录下成绩 <code>.txt</code> 文件中的考试数据，整理到 <code>成绩-ok.txt</code> 文件中，整理前，<code>成绩.txt</code> 文件中的数据格式如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>小红<span class="token operator">=</span><span class="token number">99</span> 小白<span class="token operator">=</span><span class="token number">100</span> 小黄<span class="token operator">=</span><span class="token number">70</span> 小黑<span class="token operator">=</span><span class="token number">66</span> 小绿<span class="token operator">=</span><span class="token number">88</span>
</code></pre></div><p>整理完成之后，希望得到的 <code>成绩-ok.txt</code> 文件中的数据格式如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>小红<span class="token operator">:</span> <span class="token number">99</span><span class="token punctuation">;</span>
小白<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">;</span>
小黄<span class="token operator">:</span> <span class="token number">70</span><span class="token punctuation">;</span>
小黑<span class="token operator">:</span> <span class="token number">66</span><span class="token punctuation">;</span>
小绿<span class="token operator">:</span> <span class="token number">88</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_4-4-2-实现思路分析"><a href="#_4-4-2-实现思路分析" class="header-anchor">#</a> 4.4.2 实现思路分析</h5> <ol><li>导入需要的 <code>fs</code> 文件系统模块</li> <li>使用 <code>fs.readFile()</code> 方法，读取素材目录下的 <code>成绩.txt</code> 文件</li> <li>判断文件是否读取失败</li> <li>文件读取成功后，处理成绩数据</li> <li>将处理完成的成绩数据，调用 <code>fs.writeFile()</code> 方法，写入到新文件 <code>成绩-ok.txt</code> 中</li></ol> <h5 id="_4-4-3-实现步骤"><a href="#_4-4-3-实现步骤" class="header-anchor">#</a> 4.4.3 实现步骤</h5> <ol><li>读取成绩文件</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1. 导入 fs 文件系统</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 2.调用 fs.rendFile() 读取文件的内容</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&quot;./成绩.txt&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 3. 判断是否读取成功</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;读取文件失败！&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;读取文件成功&quot;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="2"><li>处理成绩</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1. 导入 fs 文件系统</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 2.调用 fs.rendFile() 读取文件的内容</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&quot;./成绩.txt&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 3. 判断是否读取成功</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;读取文件失败！&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 4.1 将成绩按照空格进行分割</span>
  <span class="token keyword">const</span> oldArr <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 4.2 循环分割后的数组，对每一项数据，进行字符串的替换操作</span>
  <span class="token keyword">const</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  oldArr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(item)</span>
    newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;=&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;: &quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 4.3 将新数组中的每一项，进行合并，得到一个新的字符串</span>
  <span class="token keyword">const</span> newStr <span class="token operator">=</span> newArr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;\r\n&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>将整理好的成绩写入到新文件</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1. 导入 fs 文件系统</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 2.调用 fs.rendFile() 读取文件的内容</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">&quot;./成绩.txt&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 3. 判断是否读取成功</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;读取文件失败！&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 4.1 将成绩按照空格进行分割</span>
  <span class="token keyword">const</span> oldArr <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 4.2 循环分割后的数组，对每一项数据，进行字符串的替换操作</span>
  <span class="token keyword">const</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  oldArr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(item)</span>
    newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;=&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;: &quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 4.3 将新数组中的每一项，进行合并，得到一个新的字符串</span>
  <span class="token keyword">const</span> newStr <span class="token operator">=</span> newArr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;\r\n&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// console.log(newStr)</span>

  fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">&quot;./成绩-ok.txt&quot;</span><span class="token punctuation">,</span> newStr<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件写入失败&quot;</span> <span class="token operator">+</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;成绩写入成功&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_5-fs-路径问题"><a href="#_5-fs-路径问题" class="header-anchor">#</a> 5. <code>fs</code> 路径问题</h3> <h4 id="_5-1-fs-模块路径动态拼接的问题"><a href="#_5-1-fs-模块路径动态拼接的问题" class="header-anchor">#</a> 5.1 <code>fs</code> 模块路径动态拼接的问题</h4> <p>在使用 <code>fs</code> 模块操作文件时，如果提供的操作路径是以 <code>./</code> 或 <code>../</code>开头的相对路径时，很容易出现路径动态拼接错误的问题</p> <p>原因：代码在运行的时候，会以<code>执行 node 命令时所处的目录</code>，动态拼接出被操作文件的完整路径</p> <p>解决方案：在使用 <code>fs</code> 模块操作文件时，直接提供完整的路径，不要提供 <code>./</code> 或 <code>../</code> 开头的相对路径，从而防止路径动态拼接的问题</p> <h4 id="_5-2-使用完整路径替换相对路径"><a href="#_5-2-使用完整路径替换相对路径" class="header-anchor">#</a> 5.2 使用完整路径替换相对路径</h4> <p>使用完整路径替换相对路径，但这种写法移植性比较差，不利于后期的维护</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>
  <span class="token string">&quot;F:\\001-双元大课程\\009-服务器编程node\\003-Node Code\\Day_001\\Tom.txt&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span>
  <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 判断 err 对象是否为 null</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件读取失败：&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件读取成功，内容是：&quot;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_5-3-使用-dirname-解决路径拼接问题"><a href="#_5-3-使用-dirname-解决路径拼接问题" class="header-anchor">#</a> 5.3 使用 <code>__dirname</code> 解决路径拼接问题</h4> <p><code>__dirname</code> 属性 <code>Node</code> 给提供的一个全局的属性，表示当前文件所处的目录</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// __dirname 属性解决路径拼接问题</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>__dirname <span class="token operator">+</span> <span class="token string">&quot;/Tom.txt&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 判断 err 对象是否为 null</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件读取失败：&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件读取成功，内容是：&quot;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_6-path-路径模块"><a href="#_6-path-路径模块" class="header-anchor">#</a> 6. <code>path</code> 路径模块</h3> <h4 id="_6-1-什么是-path-路径模块"><a href="#_6-1-什么是-path-路径模块" class="header-anchor">#</a> 6.1 什么是 path 路径模块</h4> <ol><li><code>path</code> 模块是 <code>Node.js</code> 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求，例如：</li></ol> <ul><li><p><code>path.join()</code> 方法，用来将多个路径片段拼接成一个完整的路径字符串</p></li> <li><p><code>path.basename()</code> 方法，用来从路径字符串中，将文件名解析出来</p></li></ul> <ol start="2"><li><p>如果要在 JavaScript 代码中，使用 path 模块来处理路径，则需要使用如下的方式先导入它</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">rquire</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol> <h4 id="_6-2-path-路径拼接"><a href="#_6-2-path-路径拼接" class="header-anchor">#</a> 6.2 path 路径拼接</h4> <h5 id="_6-2-1-path-join-的语法格式"><a href="#_6-2-1-path-join-的语法格式" class="header-anchor">#</a> 6.2.1 <code>path.join()</code> 的语法格式</h5> <p>使用 <code>path.join()</code> 方法，可以把多个路径片段拼接为完整的路径字符串，语法格式如下</p> <div class="language-js extra-class"><pre class="language-js"><code>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>paths<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>参数解读：</p> <ol><li><code>...paths</code> 路径片段的序列</li> <li>返回值: 字符串</li></ol> <h5 id="_6-2-2-path-join-的代码示例"><a href="#_6-2-2-path-join-的代码示例" class="header-anchor">#</a> 6.2.2 <code>path.join()</code> 的代码示例</h5> <p>使用 <code>path.join()</code> 方法，可以把多个路径片段拼接为完整的路径字符串</p> <p>注意：今后凡是涉及到路径拼接的操作，<strong>都要使用 <code>path.join()</code> 方法进行处理</strong>。不要直接使用 + 进行字符串的拼接</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 使用 path.join() 做路径分割</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;/Tom.txt&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 判断 err 对象是否为 null</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件读取失败：&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;文件读取成功，内容是：&quot;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_6-3-获取路径中的文件名"><a href="#_6-3-获取路径中的文件名" class="header-anchor">#</a> 6.3 获取路径中的文件名</h4> <h5 id="_6-3-1-path-basename-的语法格式"><a href="#_6-3-1-path-basename-的语法格式" class="header-anchor">#</a> 6.3.1 <code>path.basename()</code> 的语法格式</h5> <p>使用 <code>path.basename()</code> 方法，可以获取路径中的最后一部分，经常通过这个方法获取路径中的文件名，语法格式如下</p> <div class="language-js extra-class"><pre class="language-js"><code>path<span class="token punctuation">.</span><span class="token function">basename</span><span class="token punctuation">(</span>path<span class="token punctuation">[</span><span class="token punctuation">,</span> ext<span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><p>参数解读：</p> <ol><li>path 必选参数，表示一个路径的字符串</li> <li>ext 可选参数，表示文件扩展名</li> <li>返回: 表示路径中的最后一部分</li></ol> <h5 id="_6-3-2-path-basename-的代码示例"><a href="#_6-3-2-path-basename-的代码示例" class="header-anchor">#</a> 6.3.2 <code>path.basename()</code> 的代码示例</h5> <p>使用 <code>path.basename()</code> 方法，可以从一个文件路径中，获取到文件的名称部分</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> fpath <span class="token operator">=</span> <span class="token string">&quot;/a/b/c/d/index.html&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 文件的存放路径</span>

<span class="token keyword">var</span> fullName <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">basename</span><span class="token punctuation">(</span>fpath<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>fullName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// index.html 打印出文件的名称</span>

<span class="token keyword">var</span> extName <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">basename</span><span class="token punctuation">(</span>fpath<span class="token punctuation">,</span> <span class="token string">&quot;.html&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>extName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// index 打印文件的名称，但是忽略后缀名</span>
</code></pre></div><h4 id="_6-4-获取路径中的文件扩展名"><a href="#_6-4-获取路径中的文件扩展名" class="header-anchor">#</a> 6.4 获取路径中的文件扩展名</h4> <h5 id="_6-4-1-path-extname-的语法格式"><a href="#_6-4-1-path-extname-的语法格式" class="header-anchor">#</a> 6.4.1 <code>path.extname()</code> 的语法格式</h5> <p>使用 <code>path.extname()</code> 方法，可以获取路径中的扩展名部分，语法格式如下</p> <div class="language-js extra-class"><pre class="language-js"><code>path<span class="token punctuation">.</span><span class="token function">extname</span><span class="token punctuation">(</span>path<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>参数解读：</p> <ol><li><code>path</code>: 必选参数，表示一个路径的字符串</li> <li>返回: 返回得到的扩展名字符串</li></ol> <h5 id="_6-4-2-path-extname-的代码示例"><a href="#_6-4-2-path-extname-的代码示例" class="header-anchor">#</a> 6.4.2 <code>path.extname()</code> 的代码示例</h5> <p>使用 <code>path.extname()</code> 方法，可以获取路径中的扩展名部分</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> fpath <span class="token operator">=</span> <span class="token string">&quot;/a/b/c/d/index.html&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 文件的存放路径</span>

<span class="token keyword">var</span> fullName <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">extname</span><span class="token punctuation">(</span>fpath<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>fullName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// .html 返回文件的拓展名</span>
</code></pre></div><h3 id="_7-时钟案例"><a href="#_7-时钟案例" class="header-anchor">#</a> 7. 时钟案例</h3> <h4 id="_7-1-案例介绍"><a href="#_7-1-案例介绍" class="header-anchor">#</a> 7.1 案例介绍</h4> <ol><li>案例要实现的功能</li></ol> <img src="/heima2020/assets/img/013-要实现的功能.37ba034c.png"> <ol start="2"><li>案例的实现步骤</li></ol> <ul><li>创建两个正则表达式，分别用来匹配 <code>&lt;style&gt;</code> 和 <code>&lt;script&gt;</code> 标签</li> <li>使用 <code>fs</code> 模块，读取需要被处理的 <code>HTML</code> 文件</li> <li>自定义 <code>resolveCSS</code> 方法，来写入 <code>index.css</code> 样式文件</li> <li>自定义 <code>resolveJS</code> 方法，来写入 <code>index.js</code> 脚本文件</li> <li>自定义 <code>resolveHTML</code> 方法，来写入 <code>index.html</code> 文件</li></ul> <h4 id="_7-2-案例实现步骤"><a href="#_7-2-案例实现步骤" class="header-anchor">#</a> 7.2 案例实现步骤</h4> <ol><li>导入需要的模块并创建正则表达式</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1.1 导入 fs 文件系统模块</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 1.2 导入 path 路径处理模块</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 1.3 匹配 &lt;style&gt;&lt;/style&gt; 标签的正则</span>
<span class="token comment">// \s 表示空白字符  \S 表示非空字符  * 表示匹配任意次</span>
<span class="token keyword">const</span> regStyle <span class="token operator">=</span> <span class="token regex">/&lt;style&gt;[\s\S]*&lt;\/style&gt;/</span><span class="token punctuation">;</span>

<span class="token comment">// 1.4 匹配 &lt;script&gt;&lt;/script&gt; 标签的正则</span>
<span class="token keyword">const</span> regScript <span class="token operator">=</span> <span class="token regex">/&lt;script&gt;[\s\S]*&lt;\/script&gt;/</span><span class="token punctuation">;</span>
</code></pre></div><ol start="2"><li>使用 <code>fs.readFile</code> 方法读取 <code>html</code> 文件的内容</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1.1 导入 fs 文件系统模块</span>

<span class="token comment">// 其他代码略……</span>

<span class="token comment">// 2.1 调用 fs.readFile() 方法读取文件</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;/index.html&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&quot;utf8&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 2.2 读取 html 文件失败</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;读取文件失败&quot;</span> <span class="token operator">+</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 2.3 读取文件成功后，调用对应的 3 个方法，解析出 css、js、html 内容</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>自定义 <code>resolveCss</code> 方法提取样式表文件</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 3.1 处理 css 样式</span>
<span class="token keyword">function</span> <span class="token function">resolveCss</span><span class="token punctuation">(</span><span class="token parameter">htmlStr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 3.2 使用正则提取页面中的 &lt;style&gt;&lt;/style&gt;</span>
  <span class="token keyword">const</span> r1 <span class="token operator">=</span> regStyle<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>htmlStr<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 3.3 将提取出来的样式字符串，做进一步的处理</span>
  <span class="token keyword">const</span> newCss <span class="token operator">=</span> r1<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;style&gt;&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;/style&gt;&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 3.4 将提取出来的 css 样式，写入到 index.css 文件中</span>
  fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;/style/index.css&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> newCss<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;写入 css 样式表失败 ！&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;写入文件成功&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="4"><li>自定义 <code>resolveJS</code>方法</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 4.1 处理 js 脚本</span>
<span class="token keyword">function</span> <span class="token function">resolveJs</span><span class="token punctuation">(</span><span class="token parameter">htmlStr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 4.2 使用正则表达式提取出页面中的 &lt;script&gt;&lt;/script&gt; 标签</span>
  <span class="token keyword">const</span> r2 <span class="token operator">=</span> regScript<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>htmlStr<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 4.3 将提取出来的脚本字符串，做进一步处理</span>
  <span class="token keyword">const</span> newJs <span class="token operator">=</span> r2<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;script&gt;&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;/script&gt;&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 4.4 将提取出来的 js 脚本，写入到 index.js 文件中</span>
  fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;/script/index.js&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> newJs<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;写入 JavaScript 脚本失败&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;写入脚本文件成功 !&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="5"><li>自定义 <code>resolveHTML</code> 方法</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 5.1 处理 html 文件函数</span>
<span class="token keyword">function</span> <span class="token function">resolveHtml</span><span class="token punctuation">(</span><span class="token parameter">htmlStr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 5.2 使用字符串的 replace 方法，把内嵌的 &lt;script&gt; 和 &lt;style&gt; 标签，替换为外联的 &lt;link&gt; 和 &lt;script&gt; 标签</span>
  <span class="token keyword">const</span> newHtml <span class="token operator">=</span> htmlStr
    <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>regStyle<span class="token punctuation">,</span> <span class="token string">'&lt;link rel=&quot;stylesheet&quot; href=&quot;./style/index.css&quot; /&gt;'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>regScript<span class="token punctuation">,</span> <span class="token string">'&lt;script src=&quot;./script/index.js&quot;&gt;&lt;/script&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 5.3 将替补完成之后的 html 代码，写入到 index.html 中</span>
  fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;/time.html&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> newHtml<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;写入文件失败&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;写入 html 页面成功 ！&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="6"><li>案例的两个注意点</li></ol> <ul><li><code>fs.writeFile()</code> 方法只能用来创建文件，不能用来创建路径</li> <li>重复调用 <code>fs.writeFile()</code> 写入同一个文件，新写入的内容会覆盖之前的旧内容</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/heima2020/node/day02.html">
        Node 第 2 天
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/heima2020/assets/js/app.e2adc9d2.js" defer></script><script src="/heima2020/assets/js/2.7389c9d3.js" defer></script><script src="/heima2020/assets/js/10.8b750e5f.js" defer></script>
  </body>
</html>
